<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>上传页面</title>
</head>
<style type="text/css">
  *{margin:0;padding: 0;list-style-type: none;font-family: 'Microsoft Yahei';}
  html{height: 100%;width: 100%;}
  body{height: 100%;width: 100%;overflow: hidden;}
  .right{width: 50%;height: 500px;margin-top:100px;padding-left: 50px;}
  .right p{font-size: 14px;color: #999;line-height: 40px;}
  .name{width: 300px;height: 30px;padding: 5px; line-height: 30px;font-size: 16px;font-weight: 400;color: #666;border: 1px solid #ccc;border-radius: 4px;}
  .fileBtn{width: auto;height: 40px;border: 1px solid red}
  .btn{display: block;width: 180px;height: 50px;border: none ;color: #fff;font-size: 26px;background-color: #29BCEF;margin-top: 50px; border-radius: 4px;cursor: pointer;}
   /*输入警告提示*/
   .warning{color: red;font-size: 12px;}
    .fileContainer{
        height:150px;
        position:relative;
        width: 150px;
        line-height: 30px;
        text-align: center;
        border-radius: 4px;
        color:#fff;
        box-shadow: 0 0 2px #999;
        cursor: pointer;
        overflow: hidden;
        color: #ccc;
        line-height: 150px;
    }
    .fileInput{
        height:200px;
        width: 200px;
        overflow: hidden;
        font-size: 30px;
        position:absolute;
        right:0;
        top:0;
        opacity: 0;
        filter:alpha(opacity=0);
        cursor:pointer;
        border:1px dashed #ccc;
    }  
    .row{height: 200px;}
    .row-left{width: 200px;height: 100px;float: left;}
    .row-img{width: 196px;height: 196px;float: left;border: 2px dashed #ccc}
</style>
<body>
	<div class="right">
          <form method="post" action="index.php?action=upload"  enctype="multipart/form-data" onSubmit="return check()">
		        <p>歌曲名字:</p>
				    <input type="text" name="name" class="name" id="name" placeholder="music name"><span class="warning" id="
            warning"></span>
            <div class="row">
                <div class="row-left">
    		            <p>歌手头像:</p>
    				        <div class="fileContainer">
            	          点击上传<br/>
                        <input class="fileInput" type="file" name="file[]" id="" />
                    </div>
                </div>
                <!-- <div class="row-img"></div> -->
            </div>
            <div class="row">
                <div class="row-left">
        		        <p>歌曲文件:</p>
        				    <div class="fileContainer">
                	       点击上传<input class="fileInput" type="file" name="file[]" id="" />
                    </div>
                </div>
                <!-- <div class="row-img"></div> -->
            </div>
          <input type="submit" class="btn" value="确定">
        </form>
    </div>
</body>
<script type="text/javascript">
   
   //验证歌曲的名字
   function check(){
     var wars=document.getElementsByTagName("span");
     var inputs=document.getElementsByTagName("input");
    if(inputs[0].value==""){
        wars[0].innerHTML="歌曲名字不能为空";
        return false;
    }else{
        wars[0].innerHTML="";
        return true;
    }     
   }
</script>
</html>